import React, {useState} from "react";
import {ProjectListScreen} from "./screens/project-list";
import {useAuth} from "./context/auth-context";
import styled from "@emotion/styled";
import {Button, Dropdown, Menu} from "antd";
import {ButtonNoPadding, Row} from "./components/lib";
import {ReactComponent as SoftwareLogo} from "assets/software-logo.svg";
import {resetRouter, useDocumentTitle} from "utils";
import {Test} from "utils/test";
import {ProjectScreen} from "screens/project";
import {Navigate, Route, Routes} from 'react-router'
import {BrowserRouter as Router} from 'react-router-dom'
import {ProjecitModal} from "screens/project-list/project-modal";
import {ProjectPopover} from "components/project-popover";


// grid-template-rows: 6rem 1fr 6rem; 意思是从上到下 上面6rem 下面6rem 其中1fr就是自己适应;
// grid-template-columns: 20rem 1fr 20rem; 意思是从左到右 左边20rem 右边20rem 其中1fr 就是自己适应
//grid-template-areas: 描述怎样排列
//grid-gap:10rem 形容每一块之间的距离是多少
//grid-area 用来给grid子元素起名字
export const AuthenticatedApp = () => {
    const [projectModalOpen, setProjectModalOpen] = useState(false)
    useDocumentTitle('任务列表', false)
    return <Container>
        <PageHeader
            projectButton={
                <ButtonNoPadding
                    type={'link'}
                    onClick={()=>setProjectModalOpen(true)}>
                    创建项目
                </ButtonNoPadding>
        } />
        <Nav/>
        <Main>
            <Router>
                <Routes>
                    <Route path={'/projects'} element={<ProjectListScreen projectButton={
                        <ButtonNoPadding
                            type={'link'}
                            onClick={()=>setProjectModalOpen(true)}>
                            创建项目
                        </ButtonNoPadding>
                    } />}></Route>
                    <Route path={'/projects/:projectId/*'} element={<ProjectScreen/>}></Route>
                    <Navigate to={window.location.pathname + '/projects'}></Navigate>
                </Routes>
            </Router>
        </Main>
        <ProjecitModal  projectModalOpen={projectModalOpen} onClose={() => setProjectModalOpen(false)}/>
        <Aside/>
        <Footer/>
    </Container>
}

const PageHeader = (props: { projectButton:JSX.Element}) => {
    return <Header between={true}>
        <HeaderLeft gap={true}>
            <ButtonNoPadding type={'link'} onClick={resetRouter}>
                <SoftwareLogo width={'18rem'} color={'rgb(38,132,255)'}/>
            </ButtonNoPadding>
            <ProjectPopover  {...props} />
            <span>用户</span>
        </HeaderLeft>
        <HeaderRight>
            <User></User>
        </HeaderRight>
    </Header>
}
const User = () => {
    const {logout, user} = useAuth()

    return <Dropdown overlay={<Menu>
        <Menu.Item key={"logout"}>
            <Button type={'link'} onClick={logout}>登出</Button>
        </Menu.Item>
    </Menu>}>
        <Button type={'link'} onClick={e => e.preventDefault()}>Hi,{user?.name}</Button>
    </Dropdown>
}
const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr 6rem;
  grid-template-columns: 0rem 1fr 0rem;
  grid-template-areas: 
"header header header"
"nav main aside"
"footer footer footer";
  height: 100vh;
  grid-gap: 2rem;

`
const Header = styled(Row)`grid-area: header;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1
`
const HeaderLeft = styled(Row)``
const HeaderRight = styled.div`

`

const Main = styled.main`grid-area: main`
const Nav = styled.nav`grid-area: nav`
const Aside = styled.aside`grid-area: aside`
const Footer = styled.footer`grid-area: footer`


function useSate(): [any, any] {
    throw new Error("Function not implemented.");
}

// const PageHeader = styled.header`
//   height: 6rem;
// `
// const Main = styled.main`
//   height: calc(100vh - 6rem);
// `
